<template>
  <div class="index">
    <Header></Header>
    <!-- 内容 -->
    <div class="bannerc">
      <div class="banner">
        <span>资源详情</span>
        <p>数字金融新原力，用科技构建信任基石</p>
      </div>
     <!-- <div class="banners">
        <img src="../assets/ziyuandetail/beij.png" alt="" />
      </div> -->
    </div>
    <!-- 内容 -->
    <div class="conent">
      <!-- 标题 -->
      <div class="conent-top">
        <img src="../assets/ziyuandetail/ziyuan.png" alt="" />
        <p>资源详情</p>
      </div>
      <!--中间 -->
      <div class="conent-bottom" v-for="item in list" :key="item + '1'">
        <!-- 左边地图 -->
        <div class="conent-bottom-left">
          <img :src="item.photo" alt="" />
        </div>
        <!-- 中间内容 -->
        <div class="conent-bottom-con">
          <div class="conent-bottom-con-top">
            <p>{{ item.title }}</p>
          </div>
          <div class="conent-bottom-con-c">
            <span>{{ item.title }}</span>
          </div>
          <div class="conent-bottom-con-c1">
            <span>作者：{{ item.username }}</span>
            <span>修改时间：{{ item.addtime }}</span>
          </div>
          <div class="conent-bottom-con-c2">
            <!-- <el-rate v-model="value1"></el-rate> -->
          </div>
          <div class="conent-bottom-con-t">
            <!-- <span>访问和使用权限</span>
            <span>任何关于适用项目的特定约束、声明、条款和条件</span> -->
          </div>
        </div>
        <!-- 右边 :class="[item.id == clickid ? 'active' : '']"-->
        <div class="conent-bottom-right" v-if="files != 1">
          <div
            :class="{ active: index == ins }"
            class="detail"
            v-for="(item, index) in imglist"
            :key="index"
            @click="changecolor(index, item.map_content, item.name)"
          >
            <img :src="index == ins ? item.active : item.img" />
            <!-- <img :src="item.img" alt="" /> -->
            <div class="text">
              <span>{{ item.title }}</span>
            </div>
          </div>
        </div>
        <!-- 下载 -->
        <div class="conent-bottom-right" v-if="files == 1">
          <div
            :class="{ active: index == ins }"
            class="details"
            v-for="(item, index) in imglists"
            :key="index"
            @click="download()"
          >
            <img :src="index == ins ? item.active : item.img" />
            <!-- <img :src="item.img" alt="" /> -->
            <div class="text">
              <span>{{ item.title }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- top -->
      <div class="conent-tops" v-for="item in list" :key="item.id">
        <p>地图内容</p>
        <div v-if="map_content != null">
          <p v-html="item.map_content"></p>
        </div>
        <div style="overflow: auto" v-if="map_content == null">
          <!-- <div v-text = 'item.content' style="white-space: pre-wrap;"></div>  -->
          <div style="white-space: pre-wrap">{{ item.content }}</div>
        </div>
        <p></p>
        <p>类型</p>
        <p>{{ item.attribute }}</p>
      </div>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import { serve } from "../api/api.js";
import Header from "@/components/header.vue";
import Footer from "@/components/Footer.vue";
let imgurl = "http://117.73.254.217:2221/resources";
// let file = "http://117.73.254.217:2221/resources/";
export default {
  name: "resoudetails",
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      ins: 0,
      list: [],
      imglist: [
        {
          id: 1,
          title: "在地图中查看器打开",
          img: require("../assets/ziyuandetail/maplan.png"),
          active: require("../assets/ziyuandetail/mps.png"),
        },
        // {
        //   id: 2,
        //   title: "分享(平台内)",
        //   img: require("../assets/ziyuandetail/enjo.png"),
        //   active: require("../assets/ziyuandetail/enjob.png"),
        // },
        // {
        //   id: 3,
        //   title: "删除",
        //   img: require("../assets/ziyuandetail/dele.png"),
        //   active: require("../assets/ziyuandetail/deleb.png"),
        // },
      ],
      imglists: [
        {
          id: 1,
          title: "下载文件",
          img: require("../assets/ziyuandetail/xiazais.png"),
          active: require("../assets/ziyuandetail/xiazais.png"),
        },
      ],
      clickid: "",
      activeid: "",
      urls: "",
      name: "",
      type: "",
      file: "",
      files: "",
      map_content: "",
    };
  },
  created() {
    this.clickid = this.$route.query.id;
    //
    this.lists();
  },
  mounted() {},
  methods: {
    //   点击
    changecolor(e) {
      this.ins = e;
      if (this.ins == 0) {
        this.$router.push({
          name: "maps",
          params: { type: this.type, name: this.name },
        });
      }
    },
    // 下载
    download() {
      // window.location.href=file +this.file;
      window.location.href = this.file;
    },
    lists() {
      let formData = new FormData();
      this.tokes = sessionStorage.getItem("token");
      formData.append("token", this.tokes);
      formData.append("id", this.clickid);
      serve(formData).then((res) => {
        this.list = res;
        for (var i = 0; i < this.list.length; i++) {
          if (this.list[i].photo) {
            this.list[i].photo = imgurl + this.list[i].photo;
          }
          if(this.list[i].map_content == null){
             if (this.list[i].content) {
            // let str =this.list[i].content
            // this.list[i].content = str.slice(2, -2);
            // console.log(this.list[i].content);
            this.list[i].content = JSON.parse(this.list[i].content);
          }
          }
         
          this.name = this.list[i].name;
          this.type = this.list[i].attribute;
          this.file = this.list[i].name;
          this.files = this.list[i].files;
          this.map_content = this.list[i].map_content;
        }
        // this.name = res.name;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.active {
  background: #0b61ff !important;
  color: #fff !important;
  width: 80%;
}
.actives {
  width: 100%;
  height: 8rem;
  position: absolute;
  background: rgba(61, 59, 59, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  opacity: 0.7;
  p {
    margin-top: 2rem;
  }
  .maps {
    width: 5rem;
    height: 1.2rem;
    font-size: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.1rem solid #fff;
    border-radius: 1rem;
  }
}
.index {
  background: #f7f7f7;
}
.bannerc {
  width: 100%;
  height: 16rem;
  position: relative;
  .banner {
    width: 100%;
    height: 16rem;
    position: absolute;
    // background: url(../assets/my/my图片.png);
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    span {
      font-size: 3rem;
    }
    p {
      font-size: 1.5rem;
    }
  }
  .banners {
    width: 100%;
    height: 16rem;
    img {
      width: 100%;
      height: 16rem;
    }
  }
}

.conent {
  width: 100%;
  // height: 50rem;
  margin-top: 1.5rem;
  .conent-top {
    width: 64%;
    height: auto;
    display: flex;
    align-items: center;
    margin: auto;
    img {
      width: 1rem;
      margin-right: 0.4rem;
    }
    p {
      color: #126ac1;
    }
    .conent-top-right {
      width: 50%;
      height: auto;
      margin: auto;
      .span1 {
        color: #1669c1;
        display: flex;
        font-size: 1.1rem;
        .yuan {
          width: 0.4rem;
          height: 0.4rem;
          border-radius: 50%;
          border: 0.1rem solid #1669c1;
          margin-top: 0.5rem;
          margin-right: 0.5rem;
        }
      }
      .span2 {
        text-indent: 1rem;
        margin-top: 0.2rem;
      }
    }
  }
  // conent
  .conent-bottom {
    width: 64%;
    height: auto;
    display: flex;
    margin: auto;
    .conent-bottom-left {
      // border:1PX solid black;
      width: 12rem;
      height: 12rem;
      border: 0.1rem solid #efefef;
      margin-right: 2rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .conent-bottom-con {
      width: auto;
      height: auto;
      .conent-bottom-con-top {
        width: auto;
        // height: 2.5rem;
        line-height: 2rem;
        color: #000;
        font-size: 1rem;
      }
      .conent-bottom-con-c {
        width: auto;
        height: auto;
        font-size: 0.9rem;
      }
      .conent-bottom-con-c1 {
        width: auto;
        height: auto;
        font-size: 0.9rem;
        display: flex;
        align-items: center;

        justify-content: space-between;
      }
      .conent-bottom-con-c2 {
        width: auto;
        height: auto;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        margin-top: 0.5rem;
        justify-content: space-between;
      }
      .conent-bottom-con-t {
        width: auto;
        height: auto;
        font-size: 0.9rem;
        display: flex;
        color: #797979;
        margin-top: 0.7rem;
        justify-content: flex-end;
        flex-direction: column;
      }
    }
    .conent-bottom-right {
      // width: 25rem;
      width: auto;
      height: auto;
      display: flex;
      flex-direction: column;
      margin: 0 auto;
      cursor: pointer;
      .detail {
        width: auto;
        height: 2.4rem;
        background: #fff;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        img {
          width: 1rem;
          height: 1.1rem;
          margin-left: 1rem;
        }
        .text {
          width: 10rem;
          height: auto;
          display: flex;
          font-size: 0.8rem;
          span {
            margin-left: 1rem;
          }
        }
      }
      .details {
        width: auto;
        height: 2.4rem;
        background: #fff;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        img {
          width: 1.2rem;
          height: 1.1rem;
          margin-left: 1rem;
        }
        .text {
          width: 10rem;
          height: auto;
          display: flex;
          font-size: 0.8rem;
          span {
            margin-left: 1rem;
          }
        }
      }
    }
  }
  .conent-tops {
    width: 64%;
    // height: 2rem;
    margin: auto;
    border-top: 0.1rem solid #e4e4e4;
    margin-top: 2rem;
  }
}
</style>